<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情</title>

    <link rel="stylesheet" href="../css/datail.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2836455_picjb9dpzmm.css">
    <script src="../js/jquery-1.11.3.js"></script>
    <script src="../js/datail.js"></script>

</head>

<body>
    <!-- 顶部 -->
    <div class="header_top">
        <div class="ui-ct">
            <!-- 左 -->
            <div class="header_top_left">

                <span class="tipsBar">
                    <span>欢迎来到网上商城！请</span>
                <a href="./login.html" class="logo">登录</a>
                <a href="./reg.html" class="logo">注册</a>
                </span>
            </div>
            <!-- 右 -->
            <div class="header_top_right">
                <ul>
                    <li>
                        网站导航
                    </li>
                    <li>
                        客户服务
                    </li>
                    <li>
                        手机商城
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- logo -->
    <div class="header_">
        <div class="header-sos">
            <div class="left">
                <a href="./home.html"><img src="http://images.400976.cn/images/77/20210616232653_36101.png" alt=""></a>
                <div class="hot_line">
                    <i class="iconfont icon icon-24gl-telephone2"></i>服务热线
                    <img src="http://www.400976.cn/static/contact/tel_img/77_header_4001366176.png" alt="">
                </div>
            </div>
            <div class="right">
                <div class="right_">
                    <i class="iconfont icon icon-fangdajing"></i>
                    <input type="text" name="" id="inp" placeholder="       请输入关键词">
                    <button id="btn">搜索</button>
                    <i class="iconfont icon icon-geren"></i>
                    <a href="shoppingcar.html"><i class="iconfont icon icon-gouwuche"></i></a>
                </div>
            </div>
        </div>
    </div>
    <!-- 全部分类 -->
    <div class="nav__">
        <div class="nav_">
            <a href="" class="active">全部产品分类</a>
            <a href="home.html">首页</a>
            <a href="goodslist.html">商品</a>
            <a href="javascript:;">问答</a>
            <a href="javascript:;">口碑</a>
            <a href="javascript:;">价格表</a>
        </div>
    </div>
    <!-- 主体 -->
    <div class="boss">
        <div class="box">
            <div class="left">

                <div class="top">
                    <img id="smallimg" src="" />
                    <div id="shadow"></div>

                    <div id="big">
                        <img id="bigimg" src="">
                    </div>


                </div>
                <div class="nav">
                    <div class="item">
                        <img src="https://gd1.alicdn.com/imgextra/i1/71202270/O1CN01rJ6uXK1SdhkfxIMtG_!!71202270.jpg_50x50.jpg|https://gd1.alicdn.com/imgextra/i1/71202270/O1CN01Pv9jDs1Sdhkgbog3T_!!71202270.jpg_50x50.jpg|https://gd2.alicdn.com/imgextra/i2/71202270/O1CN01l7bs631SdhkcwEkrs_!!71202270.jpg_50x50.jpg">
                    </div>
                    <div class="item">
                        <img src="https://gd1.alicdn.com/imgextra/i1/71202270/O1CN01rJ6uXK1SdhkfxIMtG_!!71202270.jpg_50x50.jpg|https://gd1.alicdn.com/imgextra/i1/71202270/O1CN01Pv9jDs1Sdhkgbog3T_!!71202270.jpg_50x50.jpg|https://gd2.alicdn.com/imgextra/i2/71202270/O1CN01l7bs631SdhkcwEkrs_!!71202270.jpg_50x50.jpg">
                    </div>
                    <div class="item">
                        <img src="https://gd1.alicdn.com/imgextra/i1/71202270/O1CN01rJ6uXK1SdhkfxIMtG_!!71202270.jpg_50x50.jpg|https://gd1.alicdn.com/imgextra/i1/71202270/O1CN01Pv9jDs1Sdhkgbog3T_!!71202270.jpg_50x50.jpg|https://gd2.alicdn.com/imgextra/i2/71202270/O1CN01l7bs631SdhkcwEkrs_!!71202270.jpg_50x50.jpg">
                    </div>
                    <div class="item">
                        <img src="https://gd1.alicdn.com/imgextra/i1/71202270/O1CN01rJ6uXK1SdhkfxIMtG_!!71202270.jpg_50x50.jpg|https://gd1.alicdn.com/imgextra/i1/71202270/O1CN01Pv9jDs1Sdhkgbog3T_!!71202270.jpg_50x50.jpg|https://gd2.alicdn.com/imgextra/i2/71202270/O1CN01l7bs631SdhkcwEkrs_!!71202270.jpg_50x50.jpg">
                    </div>

                </div>
            </div>
            <div class="right">
                <h2 id="goodsname">商品名称</h2>
                <p>评价： <i class="iconfont icon icon-aixin"></i> <i class="iconfont icon icon-aixin"></i> <i class="iconfont icon icon-aixin"></i> <i class="iconfont icon icon-aixin"></i> <span>（累计评论142条）</span></p>
                <div class="mid">
                    <h2 id="goodsprice">商品价格</h2>
                    <span>化妆品净含量：</span>
                    <ul>
                        <li>30g</li>
                        <li>80g</li>
                        <li>200g</li>
                    </ul>
                    <div class="inp">数量：<input id="buynum" type="number" />件</div>
                </div>
                <p>温馨提示： 本商品无质量问题不支持退换货</p>
                <p>运费： 本店满50元免运费</p>
                <p>订购电话：<img src="http://www.400976.cn/static/contact/tel_img/77_goodsdetail_4001366176.png" alt=""> 短信订购：<img src="http://www.400976.cn/static/contact/smsmobile_img/77_goodsdetail_18512548396.png" alt=""> </p>
                <div class="pbuy">
                    <button id="purchase">购买</button>
                    <button id="buy">加入购物车</button>
                </div>



            </div>
        </div>
    </div>
    <!-- footer -->
    <div class="footer">
        <div class="footer_">
            <div class="top">
                <img src="../image/e1.JPG" alt="">
                <span>客服微信号</span>
                <img src="../image/e2.JPG" alt="">
                <span>公众号</span>
                <div class="qq">
                    <div class="left">
                        <p>商务QQ:</p>
                        <p>(服务时间周一至周六 9:00-20:00）</p>
                    </div>
                    <div class="right">
                        <p>服务热线：
                            <img class="dh" src="http://www.400976.cn/static/contact/tel_img/77_footer_4001366176.png" alt="">
                        </p>
                        <p>(服务时间周一至周六 9:00-20:00）</p>
                    </div>
                </div>
                <img src="../image/e1.JPG" alt="">
                <span>商务微信</span>
                <img src="../image/e2.JPG" alt="">
                <span>商务合作微信</span>
            </div>
            <div class="bottom">
                <div class="db">
                    <p>版权所有: 漂洋海淘 | Copyright 2009-2021 © Inc. All rights reserved.</p>
                    <p>ICP备案证书号：渝ICP备14009588号-38</p>
                    <p>重庆归农农业科技有限公司 版权所有</p>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    // 标识用户身份
    var tipsBar = document.getElementsByClassName("tipsBar")[0];


    var backurl = window.localStorage
    console.log(backurl);
    if (backurl) {
        var user = backurl.getItem("user");
        console.log(user);
        if (user) {
            tipsBar.innerHTML = `<span>欢迎您,${user}</span><button onclick="exit()">退出</button>`;
        }
    }

    function exit() {
        backurl.removeItem("user");
        location.reload();
    }
</script>

</html>